<template>  
    <view class="container" style="height:100%; display: flex; flex-direction: column;">  
		<view class="main" style="flex:1; display: flex; align-items: center; justify-content: center;">   
            <view class="canvas-container">  
                <view :animation="animationData" class="canvas-content" >  
                    <view class="canvas-line">  
                        <view class="canvas-litem" v-for="(item,index1) in awardsList" :key="index1" :style="[{transform:'rotate('+item.lineTurn+')'}]"></view>  
                    </view>  

                    <view class="canvas-list">  
                        <view class="canvas-item" v-for="(iteml,index2) in awardsList" :key="index2">  
                            <view class="canvas-item-text" :style="[{transform:'rotate('+iteml.turn+')'}]">  
                                <text :style='"font-size:"+fontSize+"rpx"'>{{iteml.award}}</text>  
                            </view>  
                        </view>  
                    </view>  
                </view>  

                <view @tap="playReward" class="canvas-btn" v-bind:class="btnDisabled">开始    </view>  
            </view>  
        </view>  
		<view class="header" style="maring: 40rpx 0rpx">
			<view class="header-title"> 点击转盘开始摇号。</view>  
			<view class="header-title" style="color: red; font-weight: bold;"> 请注意：摇号之后不能再退款了！ </view>  
		</view>  
    </view>  
</template>

<script>  
import {MyTip} from '../../components/ssty/common.js';
	import {
		querySeatsForSelect, 
		bindSeatToOrder
	} from '@/api/fsh.js';
	const app = getApp();
	
    export default {  
		data() {  
			let awards = []
			//for(let i = 0; i < 40; i++) {
			//	awards.push({ index: i, name: (i+1), type:0})  
			//}
            return {  
				fontSize: awards.length<50?30:(awards.length<70?20:15),
                awardsConfig : {  
                                chance: true,  
                                awards: awards 
                            },  
                awardsList: {},  
				awardsIndex: 0,
                animationData: {},  
                btnDisabled: ''
            };  
        },  
        onLoad:function(options){  
            uni.setNavigationBarColor({  
                    frontColor: '#ffffff',  
                    backgroundColor: '#fc4141',  
                    animation: {  
                            duration: 400,  
                            timingFunc: 'easeIn'  
                    }  
            })  
			
			console.log("lotterySeat::onLoad| options=%o", options);

			this.ypOdId = options.ypOdId;
			this.loadSeats(this.ypOdId);
        },  
        onReady: function (e) {  
                this.drawAwardRoundel();  

                //分享  
                uni.showShareMenu({  
                    withShareTicket: true  
                });  
        },  
        methods: {  

			loadSeats(ypOdId) {
				uni.showLoading({
					title: '正在加载中...'
				});
				querySeatsForSelect(ypOdId).then(res => {
					uni.hideLoading();
					this.selectedSeatId = res.entity.randomSeatId;
					let seats = res.entity.seats;
					this.awardIndex = seats.findIndex(a=>a.id == res.entity.randomSeatId);
					this.awardsConfig.awards = seats.map((item,index)=>({'index': index, 'name':item.seatNo, 'type':0}));
					this.fontSize = seats.length<50?30:(seats.length<70?20:15);
					this.awardsList = [];
					this.$nextTick(() => this.drawAwardRoundel());
				}).catch(err => {
					uni.hideLoading();
					console.log("loadSeats fail ", err);
					
					uni.showModal({
						content: err.msg,
						showCancel: false,
						complete:()=>{
							app.globalData.fshingPageYpOdId = this.ypOdId;
							uni.switchTab({
								url: '/pages/fsh_main/fishing'
							});
						}
					})
				});
			},

            drawAwardRoundel: function () {  
                    var awards = this.awardsConfig.awards;  
                    var awardsList = [];  
                    var turnNum = 1 / awards.length*360;  // 文字旋转 turn 值  

                    // 奖项列表  
                    for (var i = 0; i < awards.length; i++) {  
                      awardsList.push({ turn: i * turnNum + 'deg', lineTurn: i * turnNum + turnNum / 2 + 'deg', award: awards[i].name });  
                    }  

                    this.btnDisabled = this.awardsConfig.chance ? '' : 'disabled';  
                    this.awardsList = awardsList;  
          },  

                  //发起抽奖  
            playReward: function () {  
                    //中奖index  
                    var awardsNum = this.awardsConfig.awards;  
                    //var awardIndex = Math.round(Math.random()*(awardsNum.length-1));//随机数  
					var awardIndex = this.awardIndex;  
                    var runNum = 8;//旋转8周  
                    var duration = 4000;//时长  

                    // 旋转角度  
                    this.runDeg = this.runDeg || 0;  
                    this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - awardIndex * (360 / awardsNum.length))  
                    //创建动画  
                    var animationRun = uni.createAnimation({  
                      duration: duration,  
                      timingFunction: 'ease'  
                    })  
                    animationRun.rotate(this.runDeg).step();  
                    this.animationData= animationRun.export();  
                    this.btnDisabled= 'disabled';  

                    // 中奖提示  
                    var awardsConfig = this.awardsConfig;  
                    var awardType = awardsConfig.awards[awardIndex].type;     
                    if (awardType == 0) {  
                        setTimeout(function () {  
							let that = this;
							// fix bug: 摇号后不点确定，直接返回，还能重新摇号
							// 这里改成先绑定，再弹提示
							bindSeatToOrder(that.ypOdId, that.selectedSeatId).then(res => {
								uni.hideLoading();
								uni.showModal({
								    title: '恭喜',  
								    content: '摇到' + (awardsConfig.awards[awardIndex].name + '号') ,  
								    showCancel: false,
									success: function (res) {
										that.btnDisabled= '';
										// uniapp限制了uni.switchTab后不能带参数
										app.globalData.fshingPageYpOdId = that.ypOdId;
										uni.switchTab({
											url: '/pages/fsh_main/fishing'
										});
									}
								});
							}).catch(err => {
								console.log("onTapBtn fail:", err);
								uni.hideLoading();
								uni.showModal({
									title: '摇号失败，请重新摇',  
									content: err.msg, 
									showCancel: false,
									success: function () {
										that.loadSeats(that.ypOdId);
									},
								})
							});
                        }.bind(this), duration);  
                    }else{  
                        setTimeout(function () {  
                            uni.showModal({  
                                title: '很遗憾',  
                                content: '没中奖 ' + (awardsConfig.awards[awardIndex].name),  
                                showCancel: false  
                            });  
                            this.btnDisabled= '';  
                        }.bind(this), duration);  
                    }  

            }  
        }  

    }  
</script>

<style>  
page {  
  background: #fff;  
  height: 100%;
}  
.header{  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: flex-start;  
    height: 200rpx;
}  
/* 转盘 */  
.canvas-container {  
  margin: 0 auto;  
  position: relative;  
  width: 700upx;  
  height: 700upx;  
  border-radius: 50%;  
  box-shadow: 0 10upx 30upx #333, 0 0 10upx #000;  
    border: 10rpx solid #fc4141;  
}  
.canvas-content {  
  position: absolute;  
  left: 0;  
  top: 0;  
  z-index: 1;  
  display: block;  
  width: 700upx;  
  height:700upx;  
  border-radius: inherit;  
  background-clip: padding-box;  
  /* background-color: #ffcb3f; */  
}  
.canvas-element {  
  position: relative;  
  z-index: 1;  
  width: inherit;  
  height: inherit;  
  border-radius: 50%;  
}  
.canvas-list {  
  position: absolute;  
  left: 0;  
  top: 0;  
  width: inherit;  
  height: inherit;  
  z-index: 9999;  
}  
.canvas-item {  
  position: absolute;  
  left: 0;  
  top: 0;  
  width: 100%;  
  height: 100%;  
  color: #e4370e;  
  font-weight: bold;  
  text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6);  
}  
.canvas-item-text {  
  position: relative;  
  display: block;  
  padding-top: 20upx;  
  margin: 0 auto;  
  text-align: center;  
  -webkit-transform-origin: 50% 350upx;  
  transform-origin: 50% 350upx;  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
}  
/* .canvas-item-text text{  
    font-size:30upx;  
}  */
.canvas-item-text-img{  
    width:60upx;  
    height:60upx;  
    padding-top:10upx;  
}  

/* 分隔线 */  
.canvas-line {  
  position: absolute;  
  left: 0;  
  top: 0;  
  width: inherit;  
  height: inherit;  
  z-index: 99;  
}  
.canvas-litem {  
  position: absolute;  
  left: 350upx;  
  top: 0;  
  width: 3upx;  
  height: 350upx;  
  background-color: rgba(228, 55, 14, 0.1);  
  overflow: hidden;  
  -webkit-transform-origin: 50% 350upx;  
  transform-origin: 50% 350upx;  
}  

/**  
* 抽奖按钮  
*/  
.canvas-btn {  
  position: absolute;  
  left: 310upx;  
  top: 310upx;  
  z-index: 400;  
  width: 80upx;  
  height: 80upx;  
  border-radius: 50%;  
  color: #f4e9cc;  
  background-color: #e44025;  
  line-height: 80upx;  
  text-align: center;  
  font-size: 26upx;  
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);  
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);  
  text-decoration: none;  
}  
.canvas-btn::after {  
  position: absolute;  
  display: block;  
  content: ' ';  
  left: 12upx;  
  top: -44upx;  
  width: 0;  
  height: 0;  
  overflow: hidden;  
  border-width:30upx;  
  border-style: solid;  
  border-color: transparent;  
  border-bottom-color: #e44025;  
}  
.canvas-btn.disabled {  
  pointer-events: none;  
  background: #b07a7b;  
  color: #ccc;  
}  
.canvas-btn.disabled::after {  
  border-bottom-color: #b07a7b;  
}  
.canvas-btn-table{  
    color:#fc4141;  
    width:120upx;  
    text-align: center;  
    position: absolute;  
    left: 240upx;  
    top:360upx;  
    font-size:26upx;  
    background-color: #FFFFFF;  
    opacity: 0.9;  
}  
</style>
